import { RouteRecordRaw, RouteMeta } from 'vue-router';
import { useRootStore } from '../store';
import { ElNotification } from 'element-plus';

type NewRouteRecordRaw = RouteRecordRaw & { meta: RouteMeta };

export const modeRoutes: NewRouteRecordRaw[] = [
	{
		path: 'mode1',
		name: 'mode1',
		component: () => import('@v/views/work/mode/mode1/index.vue'),
		meta: {
			name: '下载网络图片',
			icon: 'icon-xiazai',
			zoom: 1,
			offset: [0, 0],
		},
		beforeEnter(_to, _from, next) {
			const store = useRootStore();

			if (store.fileInfo) {
				if (store.fileInfo.imageCount.url > 0) {
					store.setDrawer_showComponent('mode1');
					next();
				} else {
					ElNotification({
						title: '提示',
						message: '未在文档中检测到URL',
						type: 'warning',
						position: 'top-left',
					});
				}
			}
		},
	},
	{
		path: 'mode2',
		name: 'mode2',
		component: () => import('@v/views/work/mode/mode2/index.vue'),
		meta: {
			name: '替换图片路径',
			icon: 'icon-tihuan',
		},
		beforeEnter(_to, _from, next) {
			const store = useRootStore();

			if (store.fileInfo) {
				if (store.fileInfo.imageCount) {
					if (store.fileInfo.imageCount.absolute > 0 || store.fileInfo.imageCount.relative > 0) {
						store.setDrawer_showComponent('mode2');
						next();
					} else {
						ElNotification({
							title: '提示',
							message: '未在文档中检测到本地本地',
							type: 'warning',
							position: 'top-left',
						});
					}
				}
			}
		},
	},
	{
		path: 'mode3',
		name: 'mode3',
		component: () => import('@v/views/work/mode/mode3/index.vue'),
		meta: {
			name: '移动图片位置',
			icon: 'icon-yidongwenjianjia',
		},
		beforeEnter(_to, _from, next) {
			const store = useRootStore();

			if (store.fileInfo) {
				if (store.fileInfo.imageCount) {
					if (store.fileInfo.imageCount.absolute > 0 || store.fileInfo.imageCount.relative > 0) {
						store.setDrawer_showComponent('mode3');
						next();
					} else {
						ElNotification({
							title: '提示',
							message: '未在文档中检测到本地图片',
							type: 'warning',
							position: 'top-left',
						});
					}
				}
			}
		},
	},
	{
		path: 'mode4',
		name: 'mode4',
		component: () => import('@v/views/work/mode/mode4/index.vue'),
		meta: {
			name: '移动文档位置',
			icon: 'icon-yidongwenjianjia',
		},
		beforeEnter(_to, _from, next) {
			const store = useRootStore();

			store.setDrawer_showComponent('mode4');

			next();
		},
	},
	{
		path: 'mode5',
		name: 'mode5',
		component: () => import('@v/views/work/mode/mode5/index.vue'),
		meta: {
			name: '图片引用信息',
			icon: 'icon-saomiao',
		},
		beforeEnter(_to, _from, next) {
			const store = useRootStore();

			store.setDrawer_showComponent('mode5');

			next();
		},
	},
	{
		path: 'mode6',
		name: 'mode6',
		component: () => import('@v/views/work/mode/mode6/index.vue'),
		meta: {
			name: '打包文档',
			icon: 'icon-huowudui',
		},
		beforeEnter(_to, _from, next) {
			const store = useRootStore();

			store.setDrawer_showComponent('mode6');

			next();
		},
	},
];
